<template>
  <div class="article-list" ref="articleList">
    <v-container>
      <v-row justify="center">
        <v-col cols="12" md="12" xl="7" lg="10">
          <v-list min-width="350px" color="transparent">
            <v-hover
              v-slot="{ hover }"
              v-for="(article, index) in data"
              :key="article.id"
            >
              <v-list-item
                style="box-shadow: 1px -1px 15px -6px #ABABAB;border-radius: 5px;position: relative"
                :class="{ 'list-item-hover': hover }"
                class="mb-3"
              >
                <span
                  class="pink lighten-3 white--text font-weight-bold rounded-lg pa-1 hidden-md-and-up"
                  style="font-size: .6em;position: absolute;z-index: 5;top: 5px;right: 15px;"
                  >2020-10-15 13:20:55</span
                >
                <v-list-item-avatar
                  v-if="index % 2 === 0"
                  height="180"
                  width="300"
                  rounded
                  class="hidden-sm-and-down"
                >
                  <router-link
                    :to="'/article/' + article.id"
                    style="width: 100%;height: 100%"
                  >
                    <v-img
                      :src="article.imageLink | imgSizeFilter"
                      :title="article.imageName"
                      :alt="article.imageName"
                    />
                  </router-link>
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-card :to="'/article/' + article.id">
                    <v-card-title class="text-no-wrap overflow-hidden mr-1">
                      {{ article.title }}
                    </v-card-title>
                    <v-card-text class="subtitle-2">
                      {{ article.articleDesc }}
                    </v-card-text>
                    <v-card-actions>
                      <v-list-item class="grow">
                        <v-row align="center" justify="start">
                          <v-icon class="mr-1" small>
                            mdi-eye
                          </v-icon>
                          <span class="subheading mr-2">{{
                            article.views
                          }}</span>
                          <v-icon class="mr-1 ml-2" small>
                            mdi-forum
                          </v-icon>
                          <span class="subheading mr-2">{{
                            article.commentCount
                          }}</span>
                          <v-icon class="mr-1 ml-2" small>
                            mdi-tag
                          </v-icon>
                          <span class="subheading">{{ article.tagText }}</span>
                        </v-row>
                        <v-row justify="end" class="hidden-sm-and-down">
                          <span
                            class="pink lighten-3 white--text font-weight-bold rounded-lg pa-1"
                            style="font-size: .6em"
                            >{{ article.createTime }}</span
                          >
                        </v-row>
                      </v-list-item>
                    </v-card-actions>
                  </v-card>
                </v-list-item-content>
                <v-list-item-avatar
                  v-if="index % 2 !== 0"
                  height="180"
                  width="300"
                  rounded
                  class="hidden-sm-and-down"
                >
                  <router-link
                    :to="'/article/' + article.id"
                    style="width: 100%;height: 100%"
                  >
                    <v-img
                      :src="article.imageLink | imgSizeFilter"
                      :title="article.imageName"
                      :alt="article.imageName"
                    />
                  </router-link>
                </v-list-item-avatar>
              </v-list-item>
            </v-hover>
          </v-list>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import { vantaBgInit, updateBg } from "@/util/vantaBgInit";
import { getArticleList } from "@/api/article";

export default {
  name: "ArticleList",
  mounted() {
    this.getData();
    window.addEventListener("scroll", this.scroll);
  },
  data() {
    return {
      data: [],
      pageNo: 1,
      pageSize: 10,
      pageCount: 0,
      articleListBg: null
    };
  },
  filters: {
    imgSizeFilter(val) {
      return (
        val.substr(0, val.lastIndexOf(".")) +
        "_600x360_95_c" +
        val.substr(val.lastIndexOf("."))
      );
    }
  },
  methods: {
    getData() {
      getArticleList(this.pageNo, this.pageSize).then(res => {
        res.data.page.records.forEach(v => this.data.push(v));
        this.pageNo = res.data.page.current;
        this.pageSize = res.data.page.size;
        this.pageCount = res.data.page.pages;
        this.articleListBgInit();
      });
    },
    onIntersect(entries) {
      if (entries[0].intersectionRatio >= 0.8 && this.pageNo < this.pageCount) {
        ++this.pageNo;
        this.getData();
      }
    },
    articleListBgInit() {
      if (this.articleListBg) updateBg(this);
      else this.articleListBg = vantaBgInit(this.$refs.articleList);
    },
    scroll() {
      const clientHeight = document.body.clientHeight;
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.body.scrollHeight;
      if (
        clientHeight + scrollTop >= scrollHeight - 80 &&
        this.pageNo < this.pageCount
      ) {
        ++this.pageNo;
        this.getData();
      }
    }
  },
  beforeDestroy() {
    if (this.articleListBg) this.articleListBg.destroy();
    window.removeEventListener("scroll", this.scroll);
  }
};
</script>

<style scoped>
.list-item-hover {
  transform: scale(1.05);
  transition: all 0.4s;
}
</style>
